<template>
	<view class="leave_box">
		<navTitle :titleRight="''" :title="'創建在線簡歷'"></navTitle>
		<view class="msg-box">
			<view class="fff-box">
				<!-- 步骤 1 -->
				<block v-if="stepIndex == 0">
					<view class="p-box">
						<view class="p-title">妳的姓名</view>
						<view class="p-input">
							<input v-model="name" placeholder="请输入妳的姓名" />
						</view>
					</view>
					<view class="p-box margin-top-20">
						<view class="p-title">性別</view>
						<view class="p-list">
							<view class="p-item" :class="index == sexIndex ? 'active' : ''" @tap="sexIndex = index"
								v-for="(item, index) in ['男', '女']" :key="index">{{ item }}</view>
						</view>
					</view>
					<view class="p-box margin-top-20">
						<view class="p-title">出生年月</view>
						<view class="p-input" @tap="bornVisible = true">
							{{ bornDate || '請選擇出生年月' }}
						</view>
						<!-- 出生日期选择器 -->
						<!-- <u-picker v-model="bornDateModel" @confirm="changeBornCalendar" @cancel="bornVisible = false"
							mode="time" confirm-color="#1C7AF7" :show="bornVisible"
							:params="{ year: true, month: true, day: false, hour: false, minute: false, second: false }" /> 
							-->
						<u-datetime-picker :show="bornVisible" :maxDate="maxDate" @confirm="changeBornCalendar"
							@cancel="bornVisible = false" v-model="bornDateModel" mode="year-month"></u-datetime-picker>
					</view>
					<view class="p-box margin-top-20">
						<view class="p-title">妳的身份</view>
						<view class="p-list">
							<view class="p-item" :class="index == identityIndex ? 'active' : ''"
								@tap="handleIdentity(item, index)" v-for="(item, index) in identityList" :key="index">
								{{ item.name }}
							</view>
						</view>
					</view>
					<view class="p-box margin-top-20">
						<view class="p-title">參加工作時間</view>
						<view class="p-input" @tap="workVisible = true">
							{{ workDate || '請選擇參加工作時間' }}
						</view>
						<!-- 参加工作日期选择器 -->
						<!-- <u-picker v-model="workDateModel" @confirm="changeWorkCalendar" @cancel="workVisible = false"
							mode="time" confirm-color="#1C7AF7" :show="workVisible"
							:params="{ year: true, month: true, day: false, hour: false, minute: false, second: false }" /> -->

						<u-datetime-picker :show="workVisible" @confirm="changeWorkCalendar"
							@cancel="workVisible = false" :maxDate="maxDate" v-model="workDateModel"
							mode="year-month"></u-datetime-picker>
					</view>
				</block>
				<!-- 其他步骤代码同前... -->

				<!-- 步骤 2 -->
				<block v-if="stepIndex==1">
					<view class="p-box">
						<view class="p-title">最高學歷</view>
						<view class="p-list">
							<view class="p-item" :class="index==educateIndex?'active':''"
								@tap="handleEducate(item,index)" v-for="(item,index) in educateList" :key="index">
								{{ item.name }}
							</view>
						</view>
					</view>
					<view class="p-box">
						<view class="p-title">類型</view>
						<view class="p-list">
							<view class="p-item" :class="index==typeIndex?'active':''" @tap="typeIndex=index"
								v-for="(item,index) in ['全日制','非全日制']" :key="index">{{ item }}</view>
						</view>
					</view>
					<view class="p-box">
						<view class="p-title">就讀的學校</view>
						<view class="p-input">
							<input v-model="school" placeholder="请输入就读学校" />
						</view>
					</view>
					<view class="p-box">
						<view class="p-title">就讀時間段</view>
						<view class="p-input" @tap="dateVisible=true">
							{{chooseDate || '請選擇就讀時間段'}}
						</view>
						<u-datetime-picker :show="dateVisible" @confirm="changeCalendar" @cancel="dateVisible = false"
							v-model="dateVisibles" :maxDate="maxDate" mode="year-month"></u-datetime-picker>
						<!-- <u-picker @confirm="changeCalendar" mode="time" confirm-color="#1C7AF7" v-model="dateVisible"
							:params="{ year: true, month: true, day: false, hour: false, minute: false, second: false }"></u-picker> -->
					</view>
				</block>

				<!-- 步骤 3 -->
				<block v-if="stepIndex==2">
					<view class="p-box">
						<view class="p-title">期望月薪</view>
						<view class="p-list">
							<view class="p-item" :class="myIndex==-1?'active':''" @tap="handleMY()">面議</view>
						</view>
						<view class="p-title">最低薪資</view>
						<view class="p-input">
							<input v-model="minSalary" placeholder="請選擇最低薪資" />
						</view>
						<view class="p-title">最高薪資</view>
						<view class="p-input">
							<input v-model="maxSalary" placeholder="请输入最高薪資" />
						</view>
					</view>
					<view class="p-box">
						<view class="p-title">期望職位</view>
						<view class="p-list">
							<view class="p-item" :class="index==positionIndex?'active':''"
								@tap="handlePosition(item,index)" v-for="(item,index) in positionList" :key="index">
								{{ item.name }}
							</view>
						</view>
						<view class="p-title margin-top-20">個人優勢</view>
						<view class="p-area">
							<textarea v-model="personalAdvantages" placeholder="请输入个人优势"></textarea>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="fixed-footer" @tap="handleNext()">
			<view>{{ stepIndex==2?'完成':'下壹步' }}</view>
		</view>
		<!-- <view class="fixed-footer" @tap="handleNext"
			:style="isNextStepEnabled ? 'background: linear-gradient(90deg, #016CF1 0%, #0697F6 100%)' : 'background: #C2C7CC'">
			<view>{{ stepIndex === 2 ? '完成' : '下壹步' }}</view>
		</view> -->
	</view>
</template>


<script>
	import navTitle from './../boss/components/nav-title.vue';
	import {
		saveModule
	} from '../../utils/api';
	export default {
		components: {
			navTitle,
		},
		data() {
			return {
				dateVisible: false,
				workVisible: false,
				bornVisible: false, // 控制出生年月选择框是否显示
				bornDateModel: Number(new Date()),
				dateVisibles: Number(new Date()),
				chooseDate: '',
				chooseDateModel: '',
				bornDate: '', // 出生日期
				workDate: '', // 参加工作日期
				name: '', // 用户的姓名
				school: '', // 就读学校
				minSalary: '', // 最低薪资
				maxSalary: '', // 最高薪资
				personalAdvantages: '', // 个人优势
				stepIndex: 0, // 当前步骤
				workDateModel: Number(new Date()), // 用于双向绑定工作日期
				identityList: [{
						id: 1,
						name: '職場人'
					},
					{
						id: 2,
						name: '學生'
					},
				],
				identityIndex: 0,
				sexIndex: 0,
				educateIndex: 0,
				educateList: [{
						id: 1,
						name: '初中及以下'
					},
					{
						id: 2,
						name: '中專/中技'
					},
					{
						id: 3,
						name: '高中'
					},
					{
						id: 4,
						name: '大專'
					},
					{
						id: 5,
						name: '本科'
					},
					{
						id: 6,
						name: '碩士'
					},
					{
						id: 7,
						name: '博士'
					},
				],
				typeIndex: 0,
				positionIndex: 0,
				positionList: [{
						id: 1,
						name: '項目經理'
					},
					{
						id: 2,
						name: '工程師'
					},
					{
						id: 3,
						name: '施工管理員'
					},
					{
						id: 4,
						name: '建築設計師'
					},
					{
						id: 5,
						name: '質量控制員'
					},
					{
						id: 6,
						name: '采購專員'
					},
					{
						id: 7,
						name: '成本控制員'
					},
					{
						id: 8,
						name: '安全主管'
					},
					{
						id: 9,
						name: '施工員'
					},
					{
						id: 10,
						name: '標準員'
					},
					{
						id: 11,
						name: '機械員'
					},
					{
						id: 12,
						name: '質量員'
					},
					{
						id: 13,
						name: '資料員'
					},
				],
				myIndex: -1,
				educateIndexName: '',
				personalAdvantages: '',
				maxDate: this.getMaxDate(),
			};
		},
		computed: {
			// isNextStepEnabled() {
			// 	// 步骤 1: 姓名、性别、出生日期
			// 	if (this.stepIndex === 0) {
			// 		return this.name && this.sexIndex !== undefined && this.bornDate;
			// 	}
			// 	// 步骤 2: 学历、学校、就读时间
			// 	if (this.stepIndex === 1) {
			// 		return this.educateIndex !== undefined && this.school && this.chooseDate;
			// 	}
			// 	// 步骤 3: 最低薪资、最高薪资、期望岗位
			// 	if (this.stepIndex === 2) {
			// 		return this.minSalary && this.maxSalary && this.positionIndex !== undefined;
			// 	}
			// 	return false;
			// }
		},
		methods: {
			// 获取当前月份的最大日期
			getMaxDate() {
				const currentDate = new Date();
				currentDate.setDate(1); // 设置为当前月的第一天
				currentDate.setMonth(currentDate.getMonth() + 1); // 设置为下个月的第一天
				currentDate.setDate(currentDate.getDate() - 1); // 设置为本月的最后一天
				return currentDate.getTime();
			},
			handleMY() {
				this.myIndex = 1 - this.myIndex;
			},
			handleNext() {
				console.log(this.name, this.sexIndex, this.bornDate, this.identityIndex, this.workDate)
				// 步骤 1 的验证：检查姓名、性别、出生日期、身份、参加工作时间等是否填写完整
				if (this.stepIndex === 0) {
					if (!this.name || this.name.trim() === '') {
						uni.showToast({
							title: '请输入姓名',
							icon: 'none'
						});
						return;
					}
					if (this.sexIndex === undefined) {
						uni.showToast({
							title: '请选择性别',
							icon: 'none'
						});
						return;
					}
					if (!this.bornDate) {
						uni.showToast({
							title: '请选择出生年月',
							icon: 'none'
						});
						return;
					}
					if (this.identityIndex === undefined) {
						uni.showToast({
							title: '请选择身份',
							icon: 'none'
						});
						return;
					}
					if (!this.workDate) {
						uni.showToast({
							title: '请选择参加工作时间',
							icon: 'none'
						});
						return;
					}
				}

				// 步骤 2 的验证：检查学历、学校、就读时间段等是否填写完整
				else if (this.stepIndex === 1) {
					console.log(this.educateIndex, this.typeIndex, this.school, this.chooseDate)
					if (this.educateIndex === undefined) {
						uni.showToast({
							title: '请选择最高学历',
							icon: 'none'
						});
						return;
					}
					if (!this.school || this.school.trim() === '') {
						uni.showToast({
							title: '请输入学校名称',
							icon: 'none'
						});
						return;
					}
					if (!this.chooseDate) {
						uni.showToast({
							title: '请选择就读时间段',
							icon: 'none'
						});
						return;
					}
				}

				// 步骤 3 的验证：检查薪资、期望岗位、个人优势是否填写完整
				else if (this.stepIndex === 2) {
					if (!this.minSalary || this.minSalary.trim() === '') {
						uni.showToast({
							title: '请输入最低薪资',
							icon: 'none'
						});
						return;
					}
					if (!this.maxSalary || this.maxSalary.trim() === '') {
						uni.showToast({
							title: '请输入最高薪资',
							icon: 'none'
						});
						return;
					}
					if (this.positionIndex === undefined) {
						uni.showToast({
							title: '请选择期望职位',
							icon: 'none'
						});
						return;
					}
					if (!this.personalAdvantages || this.personalAdvantages.trim() === '') {
						uni.showToast({
							title: '请输入个人优势',
							icon: 'none'
						});
						return;
					}
				}

				// 如果步骤验证通过，则跳转到下一个步骤
				if (this.stepIndex < 2) {
					this.stepIndex += 1;
				} else {
					// 完成后可以提交表单或跳转到其他页面
					this.submitForm();
				}
			},

			submitForm() {
				let res = saveModule({
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						realname: this.name,
						gender: this.sexIndex + 1,
						birthdate: this.bornDate,
						identity: this.identityIndex + 1,
						workdate: this.workDate,
						edu_type: this.typeIndex + 1,
						school_name: this.school,
						edu_start: this.edu_start,
						expect_salary_min: this.minSalary,
						expect_salary_max: this.maxSalary,
						expect_job_name: this.positionIndexText,
						summary: this.personalAdvantages
					}
				})


				// 提交成功
				uni.showToast({
					title: '创建成功',
					icon: 'success',
					duration: 2000
				});
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/successPage/successPage' // 请根据你的实际路径替换
					});
				}, 2000); // 延时 2000 毫秒后跳转
				// 跳转到其他页面，例如跳转到主页或其他成功页面
				// uni.switchTab({
				// 	url: '/pages/index/cart' // 请根据你的实际路径替换
				// });
			},


			handleEducate(item, index) {
				console.log(item, 'll')
				this.educateIndex = index
				this.educateIndexName = item.name
			},
			handlePosition(item, index) {
				this.positionIndex = index;
				this.positionIndexText = item.name
			},
			handleIdentity(item, index) {
				this.identityIndex = index;
			},
			changeWorkCalendar(e) {
				const timestamp = e.value;
				if (isNaN(timestamp)) {
					console.error('无效的时间戳:', timestamp);
					return;
				}
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				this.workDate = `${year}-${month < 10 ? '0' + month : month}`;
				this.workDateModel = this.workDate;
				this.workVisible = false;
			},
			changeBornCalendar(e) {
				const timestamp = e.value;
				if (isNaN(timestamp)) {
					console.error('无效的时间戳:', timestamp);
					return;
				}
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				this.bornDate = `${year}-${month < 10 ? '0' + month : month}`;
				this.bornDateModel = this.bornDate;
				this.bornVisible = false;
			},
			changeCalendar(e) {
				const timestamp = e.value;
				if (isNaN(timestamp)) {
					console.error('无效的时间戳:', timestamp);
					return;
				}
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				this.chooseDate = `${year}-${month < 10 ? '0' + month : month}`;
				this.chooseDateModel = this.chooseDate;
				this.dateVisible = false;
			},
		},
	};
</script>


<style lang="scss" scoped>
	.leave_box {
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		background: #F4F6FA;
	}

	.msg-box {
		width: 100%;
		overflow-y: scroll;
		margin: 0 auto;
	}

	.fixed-footer {
		width: 100%;
		height: 50px;
		margin: 20px 0;

		view {
			width: calc(100% - 40px);
			height: 44px;
			line-height: 44px;
			text-align: center;
			background: linear-gradient(90deg, #016CF1 0%, #0697F6 100%);
			border-radius: 8px;
			opacity: 0.4;
			font-weight: 500;
			font-size: 15px;
			color: #FFFFFF;
			margin: 4px auto 0;
		}

		// view.active {
		// 	background: linear-gradient(90deg, #016CF1 0%, #0697F6 100%);
		// 	opacity: 1;
		// }
	}

	.fff-box {
		background: #fff;
		width: calc(100% - 60px);
		border-radius: 10px;
		padding: 10px 20px;
		margin: 10px auto;
	}

	.p-title {
		height: 28px;
		font-weight: 600;
		font-size: 20px;
		color: #333333;
		line-height: 28px;
		margin: 10px 0 12px;
	}

	.p-list {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;

		view {
			width: calc(50% - 6px);
			height: 50px;
			text-align: center;
			line-height: 50px;
			font-weight: 600;
			font-size: 16px;
			color: #333333;
			background: #F4F6FA;
			margin-bottom: 10px;
			border-radius: 8px;
		}

		view:nth-child(2n+1) {
			margin-right: 10px;
		}

		view.active {
			color: #1C7AF7;
			border-radius: 8px;
			border: 1px solid #1C7AF7;
		}
	}

	.p-input {
		width: calc(100% - 20px);
		height: 50px;
		line-height: 50px;
		border-radius: 8px;
		border: 1px solid #C2C7CC;
		color: #808080;
		font-size: 16px;
		padding: 0 10px;

		input {
			width: 100%;
			height: 100%;
		}
	}

	.p-area {
		width: calc(100% - 20px);
		height: 200px;
		line-height: 40px;
		border-radius: 8px;
		border: 1px solid #C2C7CC;
		color: #808080;
		font-size: 16px;
		padding: 0 10px;

		textarea {
			width: 100%;
			height: 100%
		}
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.margin-top-20 {
		margin-top: 20px;
	}
</style>